<template>
  <view class="menus menus-container">
    <view class="sidebar-wrap">
      <Sidebar :data="menusList" @change="handleSidebarChange">
        <!-- <SidebarItem name="分类设置" @click="$goto('category')"></SidebarItem> -->
      </Sidebar>
    </view>
    <view class="content-wrap">
      <Content :data="goodsList" :cat-name="catName" :cat-id="catId" />
    </view>
    <Footer @cat="$goto('category')" @goods="gotoGoods" />
  </view>
</template>

<script>
import Sidebar from "./components/Sidebar/Sidebar.vue";
import SidebarItem from "./components/Sidebar/SidebarItem.vue";
import Content from "./components/Content/index.vue";
import Footer from "./components/Footer/index.vue";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  components: {
    Sidebar,
    SidebarItem,
    Content,
    Footer
  },
  data() {
    return {
      // query: {
      //   catId: ""
      // },
      // goodsList: [],
      // catName: "",
      activeIndex: 0
    };
  },
  computed: {
    ...mapState({
      sid: state => state.user.activeShopId,
      menus: state => state.menus.menus
    }),
    ...mapGetters({
      recommendList: "recommendList"
    }),
    catName() {
      return (
        this.menusList[this.activeIndex] &&
        this.menusList[this.activeIndex].name
      );
    },
    goodsList() {
      return (
        this.menusList[this.activeIndex] &&
        this.menusList[this.activeIndex].goods
      );
    },
    catId() {
      return (
        this.menusList[this.activeIndex] && this.menusList[this.activeIndex].id
      );
    },
    query() {
      return {
        catId: this.catId
      };
    },
    menusList() {
      if (this.recommendList.length == 0) {
        return this.menus;
      } else {
        let recommend = {
          name: "推荐商品",
          goods: this.recommendList,
          id: "recommend"
        };
        return [...this.menus];
      }
    }
  },
  onShow() {
    this.init();
  },
  methods: {
    ...mapActions({
      getMenus: "getMenus"
    }),
    init() {
      uni.showLoading();
      this.getMenus().then(res => {
        uni.hideLoading();
      });
    },
    handleSidebarChange(item, index) {
      this.activeIndex = index;
    },
    gotoGoods() {
      if (this.menus && this.menus.length > 0) {
        this.$goto(`goods`, { ...this.query });
      } else {
        uni.showModal({
          content: "请先添加商品分类",
          confirmText: "确定",
          showCancel: false,
          success: res => {
            if (res.confirm) {
              this.$goto("category");
            }
          }
        });
      }
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
.menus-container {
  display: flex;
  position: relative;
  height: calc(100vh - 100rpx);
  // padding-bottom: 100rpx;
  .sidebar-wrap {
    width: 200rpx;
    // height: 100vh;
    overflow-y: auto;
    background-color: $uni-bg-color-grey;
  }

  .content-wrap {
    width: 550rpx;
    // background-color: red;
    flex-grow: 1;
  }
}
</style>
